<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title data-i18n="pageTitle.hostList">主机列表</title>
    <link href="css/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/styles.css">
    <script src="js/echarts.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script src="js/i18n.js"></script>
    <script src="js/settings.js"></script>
    <script src="js/main.js"></script>
</head>
<body>
    <!-- 顶部栏将通过 JavaScript 加载 -->
    <div id="header-container"></div>

    <!-- 设置对话框容器 -->
    <div id="settingsContainer"></div>

    <!-- 主机列表表格 -->
    <div class="hosts-table">
        <table>
            <thead>
                <tr>
                    <th data-i18n="hostName">名称</th>
                    <th data-i18n="hostname">主机名称</th>
                    <th data-i18n="ipAddress">IP地址</th>
                    <th data-i18n="operatingSystem" style="width: 200px;">系统详情</th>
                    <th data-i18n="cpuCores" style="width: 80px;">CPU</th>
                    <th data-i18n="memoryTotal">内存</th>
                    <th data-i18n="cpuUsage" style="min-width: 200px;">CPU使用率</th>
                    <th data-i18n="memoryUsage" style="min-width: 200px;">内存使用率</th>
                    <th data-i18n="alerts">告警中</th>
                    <th data-i18n="runningTime" style="width: 150px;">运行时间</th>
                </tr>
            </thead>
            <tbody id="hostsList">
                <!-- 主机列表内容将通过 JavaScript 动态添加 -->
            </tbody>
        </table>
    </div>

    <!-- 主机详情对话框 -->
    <div id="hostDetailModal" class="modal-overlay" style="display: none;">
        <div class="modal-content" style="width: 80%; max-width: 1200px; height: 80vh;">
            <div class="modal-header">
                <h2 data-i18n="hostDetails">主机详情</h2>
                <button id="closeHostDetailModal" class="close-btn">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="host-detail">
                    <!-- 基本信息 -->
                    <div class="detail-card">
                        <div class="detail-card-header">
                            <h3 data-i18n="basicInfo">基本信息</h3>
                        </div>
                        <div class="detail-card-body">
                            <div class="info-grid">
                                <div class="info-item">
                                    <label data-i18n="hostName">主机名称</label>
                                    <span id="detailHostName">-</span>
                                </div>
                                <div class="info-item">
                                    <label data-i18n="ipAddress">IP地址</label>
                                    <span id="detailHostIP">-</span>
                                </div>
                                <div class="info-item">
                                    <label data-i18n="systemType">系统类型</label>
                                    <span id="detailHostOS">-</span>
                                </div>
                                <div class="info-item">
                                    <label data-i18n="cpuCores">CPU核心数</label>
                                    <span id="detailCPUCores">-</span>
                                </div>
                                <div class="info-item">
                                    <label data-i18n="memoryTotal">内存总量</label>
                                    <span id="detailMemoryTotal">-</span>
                                </div>
                                <div class="info-item">
                                    <label data-i18n="runningTime">运行时间</label>
                                    <span id="detailUptime">-</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 性能监控 -->
                    <div class="detail-card">
                        <div class="detail-card-header">
                            <h3 data-i18n="performanceMonitor">性能监控</h3>
                        </div>
                        <div class="detail-card-body">
                            <div class="performance-grid">
                                <div class="performance-chart-container">
                                    <div class="chart-header">
                                        <h4 data-i18n="cpuUsage24h">CPU使用率 (24小时)</h4>
                                        <button class="zoom-btn" data-chart="cpu" style="display: none;">
                                            <i class="fas fa-expand-arrows-alt"></i>
                                        </button>
                                    </div>
                                    <div id="detailCPUChart" class="performance-chart"></div>
                                </div>
                                <div class="performance-chart-container">
                                    <div class="chart-header">
                                        <h4 data-i18n="memoryUsage24h">内存使用率 (24小时)</h4>
                                        <button class="zoom-btn" data-chart="memory" style="display: none;">
                                            <i class="fas fa-expand-arrows-alt"></i>
                                        </button>
                                    </div>
                                    <div id="detailMemoryChart" class="performance-chart"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 图表放大对话框 -->
    <div id="zoomChartModal" class="modal-overlay" style="display: none;">
        <div class="modal-content">
            <div class="modal-header">
                <h2 id="zoomChartTitle">性能监控</h2>
                <button id="closeZoomChartModal" class="close-btn">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="time-range-buttons">
                    <button class="time-btn active" data-range="1h" data-i18n="timeButtons.1h">1小时</button>
                    <button class="time-btn" data-range="24h" data-i18n="timeButtons.24h">24小时</button>
                    <button class="time-btn" data-range="7d" data-i18n="timeButtons.7d">7天</button>
                    <button class="time-btn" data-range="15d" data-i18n="timeButtons.15d">15天</button>
                    <button class="time-btn" data-range="30d" data-i18n="timeButtons.30d">30天</button>
                </div>
                <div id="zoomChart" class="zoom-chart"></div>
            </div>
        </div>
    </div>

    <!-- 告警详情对话框 -->
    <div id="alertDetailModal" class="modal-overlay" style="display: none;">
        <div class="modal-content" style="width: 100%; max-width: 1400px;">
            <div class="modal-header">
                <h2>告警详情</h2>
                <button id="closeAlertDetailModal" class="close-btn">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <table class="alert-table">
                    <thead>
                        <tr>
                            <th>告警名称</th>
                            <th style="width: 100px;">级别</th>
                            <th style="width: 100px;">监控值</th>
                            <th style="width: 200px;">开始时间</th>
                            <th style="width: 120px;">持续时间</th>
                        </tr>
                    </thead>
                    <tbody id="alertsList">
                        <!-- 告警列表将通过 JavaScript 动态添加 -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- 主要内容区 -->
    <div class="content">
        <!-- ... 其他内容保持不变 ... -->
    </div>

    <script src="js/api.js"></script>
    <script src="js/header.js"></script>
    <script src="js/charts.js"></script>
</body>
</html> 